<script setup lang="ts">
import BaseImage from '~/components/BaseImage.vue'
import arrowRightIcon from '/images/webp/affiliate-program/arrow-right.webp'
import flagIcon from '/images/webp/affiliate-program/flag-icon.webp'
import priceIcon from '/images/webp/affiliate-program/price-icon.webp'
import shareIcon from '/images/webp/affiliate-program/share-icon.webp'
import turntableImg from '/images/webp/affiliate-program/turntable-img.webp'
import avatarImg from '/images/webp/personal/avatar.webp'


// 添加useI18n
const { t } = useI18n()


// 添加变量
const inviteFriendsCount = ref(5)
const invitedPeopleCount = ref(3)
const totalInvitedCount = ref(50)
const totalChancesCount = ref(10)

const columns = ref([
  {
    title: t('turntable_username'),
    dataIndex: 'username',
    align: 'center',
  },
  {
    title: t('turntable_time'),
    dataIndex: 'time',
    align: 'center',
  },
  {
    title: t('turntable_prize'),
    dataIndex: 'prize',
    align: 'center',
    slot: 'prize',
  },
])

definePageMeta({
  layout: 'header-back',
  title: 'get_free_coins'
});
const dataSource = ref([
  {
    username: 'sd****ws',
    time: t('turntable_just_received'),
    prize: '+10000.00',
  },
  {
    username: 'sd****ws',
    time: t('turntable_just_received'),
    prize: '+10000.00',
  },
  {
    username: 'sd****ws',
    time: t('turntable_just_received'),
    prize: '+10000.00',
  },
  {
    username: 'sd****ws',
    time: t('turntable_just_received'),
    prize: '+10000.00',
  },
  {
    username: 'sd****ws',
    time: t('turntable_just_received'),
    prize: '+10000.00',
  },
  {
    username: 'sd****ws',
    time: t('turntable_just_received'),
    prize: '+10000.00',
  },
  {
    username: 'sd****ws',
    time: t('turntable_just_received'),
    prize: '+10000.00',
  },
  {
    username: 'sd****ws',
    time: t('turntable_just_received'),
    prize: '+10000.00',
  },
  {
    username: 'sd****ws',
    time: t('turntable_just_received'),
    prize: '+10000.00',
  },
  {
    username: 'sd****ws',
    time: t('turntable_just_received'),
    prize: '+10000.00',
  },
])

const activeTab = ref('report')
const showPopup = ref(false)
const showRewardPopup = ref(false)

function closePopup() {
  showPopup.value = false
}

function closeRewardPopup() {
  showRewardPopup.value = false
}
</script>

<template>
  <div class="turntable-container">
    <div class="top-section">
      <div class="prize-block">
        <div class="prize-title">
          {{ t('turntable_total_prize') }}
        </div>
        <div class="prize-amount">
          AED 75,325,444.10
        </div>
      </div>
      <div class="user-block">
        <div class="avatar">
          <BaseImage width="24px" :url="avatarImg"/>
        </div>
        <div class="user-info">
          <div class="user-name">
            Coy...
          </div>
          <div class="user-currency">
            {{ t('turntable_account') }}: <span class="user-key">AEI</span>
          </div>
        </div>
        <div class="arrow-icon">
          <BaseImage width="8px" style="height: 11px" :url="arrowRightIcon"/>
        </div>
      </div>
    </div>

    <div class="bonus-box">
      <div class="bonus-top">
        <div class="bonus-info">
          <div class="bonus-amount">
            <BaseImage width="27px" height="20px" class="mx-1" :url="priceIcon" />
            <span class="amount-value mx-1">97.00</span>
            <BaseImage width="20px" :url="flagIcon" />
          </div>
          <div class="bonus-percentage">
            0.08%
          </div>
        </div>
        <div class="receive-bonus-btn">
          {{ t('turntable_receive_bonus') }}
        </div>
      </div>

      <div class="progress-bar">
        <div class="progress-value" />
      </div>

      <div class="flex justify-center items-center bonus-desc-container">
        <div class="bonus-desc">
          {{ t('turntable_need_more') }} <span class="mx-1">3.00</span>
          <BaseImage class="mr-1" width="14px" :url="flagIcon" /> {{ t('turntable_to_experience_wallet') }}
        </div>
      </div>
    </div>

    <div class="turntable-section">
      <img class="turntable-img" width="" :src="turntableImg" alt="转盘">
      <div class="turntable-info">
        <div class="turntable-tip">
          {{ t('turntable_reward_tip_1') }} <span class="green-text">50</span>
          <BaseImage width="14px" class="mr-2" :url="flagIcon" /> {{ t('turntable_reward_tip_2') }} <span
            class="green-text">1</span> {{ t('turntable_reward_tip_3') }}
        </div>
        <div class="countdown">
          {{ t('turntable_expires_in', { count: 2 }) }} <span class="green-text">04:34:21</span>
        </div>
      </div>
    </div>

    <div class="invite-button">
      <span>{{ t('turntable_invite_friends') }}</span>
      <BaseImage width="11px" class="mx-2" :url="shareIcon" />
    </div>

    <div class="tabs-container">
      <div class="tab" :class="{ active: activeTab === 'report' }" @click="activeTab = 'report'">
        {{ t('turntable_report') }}
      </div>
      <div class="tab" :class="{ active: activeTab === 'rules' }" @click="activeTab = 'rules'">
        {{ t('turntable_rules') }}
      </div>
    </div>

    <!-- 报告内容 -->
    <div v-if="activeTab === 'report'" class="table-container">
      <BaseTable style="font-size: 12px" :columns="columns" :data-source="dataSource" :show-empty="true">
        <template #prize="{ record }">
          <div class="prize-cell">
            <span class="prize-value">{{ record.prize }}</span>
            <BaseCurrencyIcon style="width:14px;height:14px;margin-left:4px;" cur="USDT" />
          </div>
        </template>
      </BaseTable>
    </div>

    <!-- 规则内容 -->
    <div v-else-if="activeTab === 'rules'" class="rules-content">
      <div class="rule-item">
        1.{{ t('turntable_rule_1') }}
      </div>
      <div class="rule-item">
        2.{{ t('turntable_rule_2') }}
      </div>
      <div class="rule-item">
        3.{{ t('turntable_rule_3') }}
      </div>
      <div class="rule-item">
        4.{{ t('turntable_rule_4') }}
      </div>
      <div class="rule-item">
        5.{{ t('turntable_rule_5') }}
      </div>
      <div class="rule-item">
        6.{{ t('turntable_rule_6') }}
      </div>
    </div>

    <div class="enter-game-button">
      {{ t('turntable_enter_game') }}
    </div>

    <!-- 获取更多次数弹框 -->
    <div v-if="showPopup" class="popup-overlay">
      <div class="popup-container">
        <div class="popup-header">
          <div class="popup-title">
            {{ t('turntable_get_more_chances') }}
          </div>
          <div class="popup-close" @click="closePopup">
            ×
          </div>
        </div>
        <div class="popup-content">
          <div class="invite-text">
            {{ t('turntable_invite_5_friends', { count: inviteFriendsCount }) }}
          </div>
          <div class="progress-text">
            {{ t('turntable_invited_people', { count: invitedPeopleCount }) }}
          </div>
          <div class="progress-bar-container">
            <div class="progress-bar-value" style="width: 60%;" />
          </div>
          <div class="total-invite">
            {{ t('turntable_total_invite', { count: totalInvitedCount, chances: totalChancesCount }) }}
          </div>
        </div>
        <div class="share-button">
          {{ t('turntable_share_friends') }}
        </div>
      </div>
    </div>

    <!-- 奖励弹框 -->
    <div v-if="showRewardPopup" class="popup-overlay">
      <div class="popup-container">
        <div class="popup-header">
          <div class="popup-title">
            {{ t('turntable_free_coins') }}
          </div>
          <div class="popup-close" @click="closeRewardPopup">
            ×
          </div>
        </div>
        <div class="popup-content">
          <div class="reward-min-amount">
            <BaseImage width="20px" :url="flagIcon" class="mr-2" /> {{ t('turntable_min_withdraw', { amount: '100.00' })
            }}
          </div>

          <div class="congratulation-text">
            {{ t('turntable_congratulations') }}
          </div>

          <div class="reward-amount">
            <BaseImage width="24px" height="24px" :url="priceIcon" class="mr-2" />
            <span class="amount-value" style="font-size: 18px;">97.00</span>
            <BaseImage width="20px" :url="flagIcon" class="ml-2" />
          </div>

          <div class="progress-container">
            <div class="progress-bar-bg">
              <div class="progress-bar-fill" style="width: 60%;" />
            </div>
            <div class="progress-percent">
              60.00%
            </div>
          </div>

          <div class="remain-amount">
            {{ t('turntable_need_more_for_wallet', { amount: '4.02' }) }}
            <BaseImage width="14px" :url="flagIcon" class="ml-2" />
          </div>

          <div style="padding: 0 14px;">
            <button class="claim-more-btn">
              {{ t('turntable_claim_more_cash') }}
            </button>
          </div>

          <div class="free-spin-text">
            {{ t('turntable_free_spin') }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.turntable-container {
  background-color: #232626;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  padding-bottom: 30px;
  overflow-y: scroll;
}

.loading-text {
  text-align: center;
  color: #999;
  padding: 10px 0;
  font-size: 14px;
}

.top-section {
  display: flex;
  margin-top: 10px;
  gap: 6px;
  padding: 4px;
  background-color: #323738;
  border-radius: 10.47px;
}

.prize-block {
  flex: 1;
  background-color: #232626;
  border-radius: 8px;
  padding: 8px;
}

.prize-title {
  color: #b3bec1;
  font-size: 12px;
  margin-bottom: 8px;
  font-weight: 700;
  text-align: center;
}

.prize-amount {
  color: #ff9820;
  font-size: 14px;
  font-weight: 860;
  text-align: center;
}

.user-block {
  min-width: 114px;
  background-color: #232626;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
}

.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #f0f;
  margin-right: 8px;
  overflow: hidden;
}

.user-info {
  margin-right: 12px;
}

.user-name {
  color: #fff;
  font-size: 12px;
}

.user-currency {
  color: #b3bec1;
  font-size: 12px;
}

.user-key {
  color: #24ee89;
}

.arrow-icon {
  color: #b3bec1;
  font-size: 18px;
}

.secret-area-box {
  margin-top: 10px;
}

.secret-area {
  background-color: #323738;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.secret-area-info .secret-area-title {
  color: #b3bec1;
  font-size: 12px;
  margin-bottom: 4px;
}

.secret-area-info .secret-area-amount {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

.user-avatar {
  display: flex;
  align-items: center;
}

.bonus-box {
  margin-top: 12px;
  background: linear-gradient(90deg, #305c48 0%, #353939 100%);
  border-radius: 12px;
  padding: 16px;
  position: relative;
}

.bonus-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.bonus-info {
  display: flex;
  flex-direction: column;
}

.bonus-amount {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.currency-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('/img/h5/affiliate-program/currency-icon.webp');
  background-size: cover;
  margin-right: 4px;
}

.amount-value {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.flag-icon,
.thai-flag {
  width: 20px;
  height: 14px;
  background: linear-gradient(180deg, red 33%, white 33%, white 66%, red 66%);
  border-radius: 2px;
}

.bonus-percentage {
  color: #24ee89;
  font-size: 14px;
  margin-bottom: 4px;
  font-weight: bold;
  transform: translateY(10px);
}

.progress-bar {
  height: 6px;
  background-color: #1d3a23;
  border-radius: 3px;
  width: 100%;
  margin-bottom: 10px;
}

.progress-value {
  height: 100%;
  width: 100%;
  background: linear-gradient(0deg, #24ee89, #24ee89), linear-gradient(90deg, #24ee89 0%, #9fe871 100%);
  border-radius: 3px;
}

.green-text {
  color: #24ee89;
  margin: 0 4px;
}

.receive-bonus-btn {
  background: linear-gradient(90deg, #24ee89 0%, #9fe871 100%);
  box-shadow:
    0px 0px 12px 0px #23ee884d,
    0px -2px 0px 0px #1dca6a inset;
  color: #171a1a;
  padding: 8px 32px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 16px;
}

.bonus-desc-container {
  position: relative;
}

.bonus-desc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  padding: 0 8px;
  color: #b3bec1;
  font-size: 12px;
  background: #00000033;
  text-align: center;
}

.bonus-desc span {
  color: #fff;
  font-weight: bold;
}

.turntable-section {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.turntable-img {
  width: 100%;
  max-width: 293px;
}

.turntable-info {
  margin-top: 12px;
  text-align: center;
}

.turntable-tip {
  color: #b3bec1;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.turntable-tip .flag-icon {
  margin: 0 4px;
}

.countdown {
  color: #b3bec1;
  font-size: 14px;
  margin-top: 4px;
}

.invite-button {
  margin-top: 20px;
  background: linear-gradient(90deg, #24ee89 0%, #9fe871 100%);
  box-shadow:
    0px 0px 12px 0px #23ee884d,
    0px -2px 0px 0px #1dca6a inset;
  color: #171a1a;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.invite-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  position: relative;
}

.invite-icon:after {
  content: '↗';
  position: absolute;
  top: -2px;
  right: -2px;
}

.tabs-container {
  display: flex;
  margin-top: 20px;
  border: none;
  border-radius: 7.11px;
  background-color: #323738;
}

.tab {
  flex: 1;
  text-align: center;
  height: 32px;
  line-height: 32px;
  color: #b3bec1;
  font-size: 12px;
  font-weight: 700;
  position: relative;
}

.tab.active {
  color: #fff;
  font-weight: bold;
  background-color: #3a4142;
  border-radius: 7.11px;
}

.tab.active:after {
  display: none;
}

.table-header {
  display: flex;
  background-color: #323738;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 12px 16px;
  margin-top: 10px;
}

.header-item {
  flex: 1;
  color: #b3bec1;
  font-size: 12px;
  font-weight: 600;
}

.text-right {
  text-align: right;
}

.table-container {
  background-color: #232626;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: hidden;
  margin-top: 8px;
}

.prize-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.prize-value {
  font-weight: bold;
}

.enter-game-button {
  margin-top: 20px;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #24ee89 0%, #9fe871 100%);
  box-shadow:
    0px 0px 12px 0px #23ee884d,
    0px -2px 0px 0px #1dca6a inset;
  color: #171a1a;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.arrow-indicator {
  display: none;
}

.rules-content {
  background-color: #232626;
  border-radius: 8px;
  padding: 16px 0;
  margin-top: 8px;
}

.rule-item {
  color: #b3bec1;
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 10px;
}

/* 弹框样式 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}

.popup-container {
  width: 100%;
  background-color: #232626;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slide-up 0.3s ease-out;
}

.popup-header {
  position: relative;
  padding: 16px;
  display: flex;
  justify-content: center;
  padding-top: 30px;
}

.popup-title {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.popup-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-25%);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #4a5354;
  border-radius: 6px;
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.invite-text {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
}

.progress-text {
  color: #fff;
  font-size: 12px;
  margin-bottom: 8px;
}

.progress-bar-container {
  width: 100%;
  height: 8px;
  background-color: #3a3e3f;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-bar-value {
  height: 100%;
  background: linear-gradient(90deg, #24ee89 0%, #9fe871 100%);
  border-radius: 4px;
}

.total-invite {
  color: #b3bec1;
  font-size: 14px;
  text-align: center;
  margin-bottom: 16px;
}

.share-button {
  background: linear-gradient(90deg, #24ee89 0%, #9fe871 100%);
  box-shadow:
    0px 0px 12px 0px #23ee884d,
    0px -2px 0px 0px #1dca6a inset;
  color: #171a1a;
  padding: 12px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin: 0 16px 16px 16px;
  border-radius: 8px;
}

.reward-min-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  margin-bottom: 16px;
}

.congratulation-text {
  color: #b3bec1;
  font-size: 12px;
  text-align: center;
  margin-bottom: 16px;
}

.reward-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.progress-container {
  position: relative;
  margin: 0 14px 16px 14px;
}

.progress-bar-bg {
  height: 6px;
  background-color: #3a3e3f;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #24ee89 0%, #9fe871 100%);
  border-radius: 3px;
}

.progress-percent {
  position: absolute;
  right: 0;
  top: -18px;
  color: #fff;
  font-size: 12px;
}

.remain-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b3bec1;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

.claim-more-btn {
  background: linear-gradient(90deg, #24ee89 0%, #9fe871 100%);
  box-shadow:
    0px 0px 12px 0px #23ee884d,
    0px -2px 0px 0px #1dca6a inset;
  color: #171a1a;
  padding: 12px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  border-radius: 8px;
  border: none;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.free-spin-text {
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 16px 8px;
  background: #24ee891a;
}

.mr-2 {
  margin-right: 8px;
}

.ml-2 {
  margin-left: 8px;
}
</style>
